<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <style>
        #color{
            width: 100px;
            height: 100px;
           border: 1px solid gray;
        }
        .div:nth-child(2){
            width: 241px;
            height: 10px;
            margin-top: 10px;
            border: 1px solid gray;
            position: relative;
            border-radius: 80px;
        }
        .div:nth-child(3){
            width: 241px;
            height: 10px;
            margin-top: 20px;
            border: 1px solid gray;
            position: relative;
            border-radius: 80px;
        }
        .div:nth-child(4){
            width: 241px;
            height: 10px;
            margin-top: 20px;
            border: 1px solid gray;
            position: relative;
            border-radius: 80px;
        }
        section{
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #807e20;
            position: absolute;
            top:-3px;
            z-index: 100;
        }
        .div:nth-child(2) span{
            height: 10px;
            background: red;
            position: absolute;
            border-radius: 10px;
        }
        .div:nth-child(3) span{
            height: 10px;
            background: green;
            position: absolute;
            border-radius: 10px;
        }
        .div:nth-child(4) span{
            height: 10px;
            background: blue;
            position: absolute;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <div id="color"></div>

    <div class="div">
        <section></section>
        <span></span>
    </div>

    <div class="div">
        <section></section>
        <span></span>
    </div>

    <div class="div">
        <section></section>
        <span></span>
    </div>


    <script>

        var div = document.querySelector('.div')
        var section = document.querySelectorAll('section')
        var span = document.querySelectorAll('span')
        var color = document.querySelector('#color')
        var drag = false
        var mainX,lenX
        var num1 =0
        var num2 = 0
        var num3 = 0
        function show1() {
            section[0].onmousedown=function (ev) {
                drag = true
                lenX = ev.clientX - section[0].offsetLeft

                document.onmousemove = function (ev) {
                    if (!drag) return
                    mainX = ev.clientX - lenX
                    mainX = mainX <= 0 ? 0 : mainX
                    mainX = mainX >= 225 ? 225 : mainX
                    section[0].style.left = mainX + 'px'
                    span[0].style.width = (mainX + 5) + 'px'
                    num1 = mainX
                    color.style.backgroundColor = 'rgb(+' + num1 + ',' + num3 + ',' + num2 + ')'
                }

                document.onmouseup = function (ev) {
                    drag = false
                }
            }
        }
        show1()
        function show2() {
            section[1].onmousedown=function (ev) {
                drag = true
                lenX = ev.clientX - section[1].offsetLeft

                document.onmousemove = function (ev) {
                    if (!drag) return
                    mainX = ev.clientX - lenX
                    mainX = mainX <= 0 ? 0 : mainX
                    mainX = mainX >= 225 ? 225 : mainX
                    section[1].style.left = mainX + 'px'
                    span[1].style.width = (mainX + 5) + 'px'
                    num2 = mainX
                    color.style.backgroundColor = 'rgb(+' + num1 + ',' + num2 + ',' + num3 + ')'
                }
                document.onmouseup = function (ev) {
                    drag = false
                }
            }
        }
        show2()
        function show3() {
            section[2].onmousedown=function (ev) {
                drag = true
                lenX = ev.clientX - section[2].offsetLeft

                document.onmousemove = function (ev) {
                    if (!drag) return
                    mainX = ev.clientX - lenX
                    mainX = mainX <= 0 ? 0 : mainX
                    mainX = mainX >= 225 ? 225 : mainX
                    section[2].style.left = mainX + 'px'
                    span[2].style.width = (mainX + 5) + 'px'
                    num3 = mainX
                    color.style.backgroundColor = 'rgb(+' + num1 + ',' + num2 + ',' + num3 + ')'
                }
                document.onmouseup = function (ev) {
                    drag = false
                }
            }
        }
        show3()
    </script>
</body>
</html>